<template>
<div  class="mod-order-order">
<div>
    <!-- 弹框信息 -->
    <el-dialog title="订单信息" :visible.sync="dialogTableVisible">
        <el-table :data="gridData">
            <el-table-column  property="orderId" label="订单号" width="150"></el-table-column>
            <el-table-column property="proname" label="商品名" width="150"></el-table-column>
            <el-table-column property="price" label="价格" width="200"></el-table-column>
            <el-table-column property="quantity" label="数量"></el-table-column>
            <el-table-column property="remarks" label="备注"></el-table-column>
        </el-table>
    </el-dialog>

</div>


    <el-form :inline="true">
        <el-form-item>
            <el-input
                    v-model="order_id"
                      placeholder="订单编号"
                      ></el-input>
        </el-form-item>
        <el-form-item>
            <el-date-picker v-model="dateRange"
                            type="datetimerange"
                            range-separator="至"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
            <template>
                <el-select v-model="value"
                           clearable
                           placeholder="请选择订单状态">
                    <el-option v-for="item in options"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
            </template>
        </el-form-item>
        <el-form-item>
            <el-button type="primary"
                       icon="el-icon-search"
                       size="small"
                       @click="search"
                      >查询</el-button>
            <el-button

                       type="primary"
                       size="small">导出待发货订单</el-button>
            <el-button

                       type="primary"
                       size="small">导出销售记录</el-button>
        </el-form-item>



        <div class="main">
            <div class="content">
                <div class="tit">
                    <!--表单表头-->
                    <el-row style="width:100%">
                        <el-col :span="10"><span class="item product">商品</span></el-col>
                        <el-col :span="3"><span class="item">成交单价/购买数量</span></el-col>
                        <el-col :span="3"><span class="item">实付金额</span></el-col>
                        <el-col :span="3"><span class="item">支付方式</span></el-col>
                        <el-col :span="3"><span class="item">订单状态</span></el-col>
                        <el-col :span="2"><span class="item">操作</span></el-col>
                    </el-row>
                </div>
                <div class="prod"
                     v-for="order in dataList">
                    <div class="prod-tit">
                        <span>订单编号：{{order.orderId}}</span>
                        <span>订单时间：{{order.updatedAt}}</span>
                    </div>
                    <div class="product-content">
                        <div class="prod-image">
                            <img :src="iphoneImg"
                                 style="height:100px;width: 100px;">
                        </div>
                        <div class="prod-name">
                            <span>{{order.proname}}</span>
                        </div>
                        <div class="prod-price">
                            <span>￥{{order.price}}</span>
                            <span >X{{order.quantity}}</span>
                        </div>
                        <div class="prod-price-total">
                            <span>{{order.price*order.quantity }}元</span>
                        </div>
                        <div class="prod-price-type">
                            <span>支付宝</span>
                        </div>
                        <div   class="prod-price-status"    :style="{'color': (order.status=='成功' ? 'dodgerblue':'red')} ">
                            <span>{{order.status}}</span>
                        </div>

                        <div   class="prod-price-change"  >
                            <el-button  type="primary" style="margin-left: 80px" @click="change">修改</el-button>
                        </div>
                    </div>
                    <div class="remark">
                        <div class="buyer-remark">
                            <span>备注:{{order.remarks}}</span>
                        </div>
                    </div>
                </div>



            </div>
            <el-pagination
                  style="margin-left:800px"
                    background
                    layout="prev, pager, next"
                  @next-click="next_page"
                    :total="30">
            </el-pagination>
        </div>
        </el-form>
</div>
</template>

<script>
    import  iphone from '../../assets/iphone.jpg'
    export default {

        name: "order",
        data () {
            return {
test:{

},
                gridData:[

        ],
                dialogTableVisible: false,
                dialogFormVisible: false,

                order_id:"",
               iphoneImg:iphone,
                dataForm: {},
                value: '',
                dateRange: [],
                options: [{
                    value: 1,
                    label: '待付款'
                },
                    {
                        value: 2,
                        label: '待发货'
                    },
                    {
                        value: 3,
                        label: '待收货'
                    },
                    {
                        value: 4,
                        label: '待评价'
                    },
                    {
                        value: 5,
                        label: '成功'
                    },
                    {
                        value: 6,
                        label: '失败'
                    }],
                // resourcesUrl: window.SITE_CONFIG.resourcesUrl,
                dataList: {},
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 10 // 每页显示多少条
                },
                dataListLoading: false,
                dataListSelections: [],
                addOrUpdateVisible: false,
                consignmentInfoVisible: false
            }
        },
        methods:{
            //获取下一次的数据
            next_page(){
                console.log("asfasfsfaga")
            },
            //获取数据
            getdataorder(){

                const query = Bmob.Query("order");
                query.find().then(res => {
                    this.dataList =res

                });
            },
            //点击按钮显示弹框，修改信息
            change(){
                console.log("修改成功")
            },
            //点击查询获取数据
            search(){
                const query = Bmob.Query("order");
                query.equalTo("orderId","==", this.order_id);
                query.find().then(res => {
                if(res.length>=1){
                    this.gridData = res


                    this.dialogTableVisible = true
                }else{
                    this.$message({
                        type: 'error',
                        message: '无订单记录'
                    });
                }
                });


            }
        },


        created(){
            this.getdataorder()

        }
    }
</script>

<style scoped>

    .tit {

        display: flex;
        height: 45px;
        align-items: center;
    }
   .item {
        padding: 0 10px;
        width: 10%;
        text-align: center;
    }
     .product {
        width: 25%;
    }
    .prod-tit {
        padding: 10px;
        background: #f8f8f9;
        border-left: 1px solid #dddee1;
        border-top: 1px solid #dddee1;
        border-right: 1px solid #dddee1;
    }
    .prod-tit span {
        margin-right: 15px;
    }
.product-content{
    display: flex;
    align-items: center;
}
    .prod-name{
        margin-left: 30px;
      margin-top: 50px;
     font-family: Arial;
        font-size: medium;
    }
    .prod-price{
        display: flex;
        justify-content: center;
       align-items: flex-end;

        margin-left: 300px;

    }
    .prod-price-total{
        color: red;
        font-size: large;
        margin-left: 60px;
    }
    .prod-price-type{
        color: dodgerblue;
        margin-left: 100px;
    }
    .prod-price-status{
        color: dodgerblue;
        margin-left: 100px;
    }

    .remark {
        width: 100%;
        height: 50px;
        line-height: 50px;
        background-color: #e8f7f6;
        border-left: 1px solid #dddee1;
        border-right: 1px solid #dddee1;
        border-bottom: 1px solid #dddee1;
        margin-bottom: 20px;
    }
    .buyer-remark {
        padding: 0 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>